<template>
  <div id="index">
    <div id="title">历史订单</div>
    <div id="total">订单总数为：{{orderNumber}} 订单总金额为：{{totalPrice}}</div>
    <div class="orderItem" v-for="(item,index) in orderDetail" :key="index">
      <div id="detail" style="display: flex;flex-direction: column">
        <span id="o_id">订单序号：{{item.o_id}}</span>
        <span id="time">订单时间：{{item.time}}</span>
        <span id="t_id">顾客id：{{item.t_id}}</span>
        <span id="cz_id">餐桌号：{{item.cz_id}}</span>
      </div>
      <div>
        <img id = "money" src="/static/order/money.png" alt="">
        <span id="price" style="color:gold;font-size: 1rem">{{item.price}}</span>
      </div>
    </div>
    <span>-------------------------完--------------------------</span>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        orderNumber: '0',
        totalPrice: 0,
        orderDetail: [],
      }
    },
    methods: {

    },
    mounted(){
      let data = {S_id:"s001"};
      this.$axios.get("getOrderBySid", data).then(res=>{
        this.orderDetail = res.data;
        this.orderNumber = this.orderDetail.length;
        for(let i=0;i<this.orderNumber;i++){
          this.totalPrice = this.orderDetail[i].price + this.totalPrice;
        }
        console.log(this.orderDetail);
      });
    }
  }
</script>

<style scoped>
  #title{
    height: max-content;
    margin-top: 0.2rem;
    display: flex;
    justify-content: center; 
    align-items: Center;
    front-family: monospace;
    font-weight: bold;
  }
  #total{
    height: min-content;
    margin-top: 0.2rem;
    display: flex;
    font-family: Cursive;
    font-size: 0.36rem;
  }
  .orderItem{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: row;
    border-top: rgba(136, 136, 136) solid 2.5px;
  }
  .orderItem div{
    margin-left: 0.5rem;
    margin-top: auto;
    margin-bottom: auto;
    height: max-content;
    width: max-content;
  }
  .orderItem div span{
    width: max-content;
    font-size: 0.3rem
  }
  #money{
    margin-bottom: auto;
    margin-top: auto;
    margin-left: 0.4rem;
    width: 0.6rem;
    height: 0.8rem;
  }
</style>
